<template>
  <div>
    <el-table ref="table"
              :data="tableData"
              style="width: 100%; margin-top: 0">
      <el-table-column prop="username"
                       label="姓名"
                       width="180">
      </el-table-column>
      <el-table-column prop="studentNum"
                       label="学号"
                       width="180">
      </el-table-column>
      <el-table-column prop="email"
                       label="邮箱"
                       width="180">
      </el-table-column>
      <el-table-column prop="role"
                       label="角色">
        <template slot-scope="scope">
          <el-radio-group v-model="scope.row.role"
                          @change="permissinChange(scope.row.studentNum,scope.row.role)">
            <el-radio-button label="超级管理员"></el-radio-button>
            <el-radio-button label="宿舍管理员"></el-radio-button>
            <el-radio-button label="学生卫生纪检员"></el-radio-button>
            <el-radio-button label="学生"></el-radio-button>
          </el-radio-group>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>

export default {
  name: 'controlTable',
  props: {
    tableData: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {

    }
  },

  methods: {
    // 修改权限
    permissinChange (studentNum, newRole) {
      const role = newRole === '超级管理员' ? 'admin' : newRole === '宿舍管理员' ? 'general' : newRole === '学生卫生纪检员' ? 'inspector' : 'student'
      // console.log(role)
      this.$confirm(`此操作将修改该用户权限为${newRole}，是否继续？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const { data: res } = await this.$axios.post('users/permissinChange', {
          studentNum,
          role
        })
        if (res.code !== -1) {
          this.$message({
            type: 'success',
            message: '修改成功!'
          })
        }
      }).catch(() => {
        this.serchTableData = []
        this.defaultRole = '学生'
        this.$message({
          type: 'info',
          message: '已取消修改'
        })
      })
    }
  }
}

</script>
<style lang='' scoped>
</style>
